<template>
  <div class="book_details">
    <!-- 顶部 -->
    <div class="top" :style="bgChange">
      <span class="back" @click="$router.back()">
        <i class="iconfont icon-zuojiantou"></i>
      </span>
      <span class="novel_name" v-show="scroll > 190">{{ bookData.title }}</span>
      <span class="todo" @click="showShare = true">
        <i class="iconfont icon-fenxiang_2"></i>
      </span>
    </div>
    <!-- 分享界面 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <!-- 加载 -->
    <div class="loading" v-show="loading">
      <van-loading size="24px" vertical>玩命加载中...</van-loading>
    </div>
    <div class="container" ref="distanceTop" v-show="!loading">
      <div class="content">
        <!-- 顶部图片 -->
        <div class="bg_cover">
          <img class="bg_cover" v-lazy="bookData.picUrl" alt="" />
          <div class="book_introduct">
            <div class="left">
              <img v-lazy="bookData.picUrl" alt="" />
            </div>
            <div class="right">
              <!-- 内容居中显示 -->
              <div>
                <div class="name">{{ bookData.title }}</div>
                <div class="writer">作者: {{ bookData.author || "佚名" }}</div>
                <div class="type">类型: {{ bookData.type || "暂无类别" }}</div>
                <div class="introduce">
                  所属: {{ bookData.company || "起点中文网" }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 书本简介 -->
        <div class="brief_introduction">
          <div :class="['text', { autoh: autoH }]">
            <p>
              {{ bookData.summary }}
            </p>
            <!-- 图标区域 -->
            <span class="down_arrows" v-show="!autoH" @click="autoH = true"
              ><i class="iconfont icon-xiajiantou"></i
            ></span>
            <span class="up_arrows" v-show="autoH" @click="autoH = false"
              ><i class="iconfont icon-shangjiantou"></i
            ></span>
          </div>
        </div>
        <!-- 目录和最近更新 -->
        <div class="mesh">
          <div class="m_left">
            <span>目录</span>
          </div>
          <div class="m_right">
            <div class="updata">
              <p class="time">{{ updateTime }}</p>
              <p class="section">{{ lastSection }}</p>
            </div>
          </div>
          <div class="more">
            <span><i class="iconfont icon-youjiantou"></i></span>
          </div>
        </div>

        <!-- 评论 -->
        <div class="comment">
          <!-- 头部 -->
          <div class="comment_header">
            <span class="hots">热门评论</span>
            <span class="icon" @click="tip"
              ><i class="iconfont icon-yongyan"></i
            ></span>
          </div>
          <!-- 内容 -->
          <div class="c_content">
            <div class="item" v-for="(item, index) in comment" :key="item.id">
              <!-- 用户信息 -->
              <div class="user">
                <div class="user_cover">
                  <span><i class="iconfont icon-wode1"></i></span>
                </div>
                <div class="user_msg">
                  <p class="u_name">{{ item.name }}</p>
                  <p class="c_time">{{ item.time }}</p>
                </div>
                <div class="praise" @click="changePraise(index)">
                  <span class="icon" v-show="!item.praise">
                    <i class="iconfont icon-dianzan1"></i>
                  </span>
                  <span
                    class="icon"
                    v-show="item.praise"
                    style="color: #e05666"
                  >
                    <i class="iconfont icon-dianzan"></i>
                  </span>
                  <span class="c_num">{{ item.num }}</span>
                </div>
              </div>
              <!-- 评论内容 -->
              <div class="c_text">
                <p>{{ item.content }}</p>
              </div>
            </div>
          </div>
          <!-- 尾部 -->
          <div class="c_footer">
            <p @click="tip">
              查看全部评论 <span><i class="iconfont icon-youjiantou"></i></span>
            </p>
          </div>
        </div>

        <!-- 作者还写过 -->
        <div class="similarity">
          <!-- 头 -->
          <div class="s_header">
            <span class="hots">作者还写过</span>
          </div>
          <div class="s_item">
            <div
              class="books"
              v-for="(item, index) in anthorProduction"
              :key="item.id"
              v-show="index + 1 <= showItem"
              @click="changeBookId(item.id)"
            >
              <!-- 图片 -->
              <div class="img">
                <img v-lazy="item.cover" alt="" />
              </div>
              <!-- 文字 -->
              <div class="text">
                <p class="bookname">{{ item.title }}</p>
                <p class="writer">{{ bookData.author || "佚名" }}</p>
              </div>
            </div>

            <!-- 底部 -->
            <div class="s_footer">
              <div v-show="!isShowMore" @click="showIitemFun">
                <span>更多</span
                ><span><i class="iconfont icon-xiajiantou"></i></span>
              </div>
              <div v-show="isShowMore" @click="showIitemFun">
                <span>收起</span
                ><span><i class="iconfont icon-shangjiantou"></i></span>
              </div>
            </div>
          </div>
        </div>

        <!-- 大家还看过 -->
        <div class="also_seen">
          <div class="a_header">
            <span class="seen">大家还看过</span>
          </div>
          <!-- 展示 -->
          <div class="a_item">
            <!-- 书本 -->
            <div
              class="books"
              v-for="(item, index) in everyoneReading"
              :key="item.id"
              v-show="index < 6"
              @click="changeBookId(item.id)"
            >
              <!-- 图片 -->
              <div class="img">
                <img v-lazy="item.cover" alt="" />
              </div>
              <!-- 文字 -->
              <div class="text">
                <p class="bookname">{{ item.title }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部区域 -->
    <div class="bottom" v-show="!loading">
      <div class="b_item" v-show="!inBookrack" @click="changeStatus">
        <span class="font"><i class="iconfont icon-jiarushujia"></i></span>
        <span>加入书架</span>
      </div>
      <div class="b_item" v-show="inBookrack" @click="changeStatus">
        <span class="font"><i class="iconfont icon-yijiarushujia"></i></span>
        <span>移出书架</span>
      </div>
      <div class="b_item" @click="tips">
        <span class="font"><i class="iconfont icon-xiazai"></i></span>
        <span>缓存下载</span>
      </div>
      <router-link
        tag="div"
        :to="'/reading?id=' + bookId"
        class="b_item item_end"
      >
        <span>立即阅读</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import { getBookDetails, getBookLastSection } from "../../api/base";
import { mapState } from "vuex";
export default {
  name: "bookdetails",
  data() {
    return {
      autoH: false, //控制高度是否自适应
      bgChange: "background-color:transparent;", //控制顶部导航的高度
      scroll: "", //滚动条高度
      bookId: "", //默认为剑来id
      // 评论假数据
      comment: [
        {
          id: 1,
          name: "无敌暴龙战士",
          time: "2021/12/31 15:10:40",
          content: "怎么说呢，我暴龙战士就喜欢看这种小说",
          praise: false,
          num: 36,
        },
        {
          id: 2,
          name: "抬杠运动员",
          time: "2021/11/28 21:05:36",
          content: "评论区随机找一位幸运观众来和我抬杠",
          praise: false,
          num: 32,
        },
        {
          id: 3,
          name: "用户13481323106",
          time: "2021/11/21 22:34:23",
          content: "搁谁谁不迷糊啊",
          praise: false,
          num: 15,
        },
        {
          id: 4,
          name: "用户18078386631",
          time: "2021/11/15 21:45:28",
          content: "文笔不好，口水话一大堆，垃圾小说。",
          praise: false,
          num: 7,
        },
      ],
      loading: true, //数据加载中
      showItem: 4, //控制作者写过的书展示的本数量,
      isShowMore: false, //控制显示的书本的多少，
      bookData: {}, //书本信息
      anthorProduction: [], //作者还写过其它的书籍
      everyoneReading: [], //大家都在读
      updateTime: "", //更新事件
      lastSection: "暂无最新章节", //最新章节
      showShare: false, //分享弹出层
      inBookrack: false, //是否在书架中
      // 弹出层内容
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    // 点赞
    changePraise(index) {
      // 更改点赞状态
      this.comment[index].praise = !this.comment[index].praise;
      this.comment[index].praise
        ? (this.comment[index].num += 1)
        : (this.comment[index].num -= 1);
    },
    // 获取最新章节
    getNewSectionFun() {
      getBookLastSection({
        id: this.bookId,
      }).then((res) => {
        this.lastSection = res.item.latestArticleTitle;
        let date = res.item.update;
        // 时间处理
        this.updateTime = new Date(date).toLocaleString();
      });
    },
    tips() {
      Toast("此功能正在审核中...");
    },
    // 点击更多评论
    tip() {
      Toast("评论功能审核中...");
    },
    // 展开收起书本
    showIitemFun() {
      this.isShowMore = !this.isShowMore;
      if (this.isShowMore) {
        this.showItem = 8;
      } else {
        this.showItem = 4;
      }
    },
    // 滚动变色
    changeColor() {
      this.scroll = this.$refs.distanceTop.scrollTop;
      console.log("滚动事件生效");
      if (this.scroll) {
        if (this.scroll > 210) {
          this.bgChange = "background-color:#52b594;";
        } else {
          this.bgChange = "background-color:transparent;";
        }
      }
    },
    // 本页面获取书本信息处理方法
    getBookDetailsDataFun() {
      this.loading = true;
      getBookDetails({
        id: this.bookId,
      }).then((res) => {
        // 处理数据
        let obj = {
          // id
          id: res.feed.id,
          // 作者
          author: res.feed.entry.author.name,
          // 书名
          title: res.feed.entry.title,
          // 类型
          type: res.feed.entry["pris:book"].keyname,
          // 公司
          company: res.feed.entry["pris:book"].authorizer,
          // 说明
          summary: res.feed.entry.summary,
          // 图片
          picUrl:
            res.feed.entry.link[2].href ||
            require("../../assets/img/book_cover.jpg"),
        };
        this.bookData = obj;
        this.loading = false;
      });
    },
    // 从其它路由进入调用此方法获取书本信息
    getBookDetailsFun() {
      this.bookId = this.$route.query.id;
      this.getBookDetailsDataFun();
    },
    // 获取作者还写过什么书，假数据
    getAuthorProductionFun() {
      axios.get("data/bookmall/fengXiangRanking.json").then((res) => {
        this.anthorProduction = res.data;
      });
    },
    // 获取大家都在看的书
    getEveryoneReadingFun() {
      axios.get("data/bookmall/newBook.json").then((res) => {
        this.everyoneReading = res.data;
      });
    },
    // 更改书籍ID
    changeBookId(id) {
      console.log("传递的id==》", id);
      // id改变，则重新渲染
      this.bookId = id;
    },
    // 分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    // 改变状态
    changeStatus() {
      this.inBookrack = !this.inBookrack;
      if (this.inBookrack) {
        Toast("加入书架成功");
      } else {
        Toast("移出书架成功");
      }
    },
    // 移出书架
    addBookrackData() {
      let rackObj = {
        id: this.bookId,
        author: this.bookData.author,
        cover: this.bookData.picUrl,
        title: this.bookData.title,
      };
      this.$store.commit("addrack", rackObj);
    },
    // 移出书架
    removeBookrackData() {
      let rackObj = {
        id: this.bookId,
        author: this.bookData.author,
        cover: this.bookData.picUrl,
        title: this.bookData.title,
      };
      this.$store.commit("removerack", rackObj);
    },
    // 添加历史记录
    addHistory(){
       let obj = {
        id: this.bookId,
        author: this.bookData.author,
        cover: this.bookData.picUrl,
        title: this.bookData.title,
      };
      this.$store.commit("sethistory",obj);
    }
  },
  created() {
    // 查找id获取数据
    this.getBookDetailsFun();
    // 获取最新章节
    this.getNewSectionFun();
    // 获取作者还写过其它
    this.getAuthorProductionFun();
    // 获取大家都在看的书
    this.getEveryoneReadingFun();

    // 书架加入处理
    if (this.bookList.findIndex((item) => item.id == this.bookId) == -1) {
      this.inBookrack = false;
    } else {
      this.inBookrack = true;
    }
  },
  // 挂载
  mounted() {
    this.$refs.distanceTop.addEventListener("scroll", this.changeColor, true);
  },
  // 销毁前
  beforeDestroy() {
    // 销毁前更改状态
    if (this.inBookrack) {
      this.addBookrackData();
    } else {
      this.removeBookrackData();
    }
    // 调用加入历史的方法
    this.addHistory();

  },
  watch: {
    // 书本id改变就会更新界面
    bookId(newV) {
      console.log("侦听器生效");
      console.log(newV);
      // 查找id获取数据
      this.getBookDetailsDataFun();
      // 获取最新章节
      this.getNewSectionFun();
      // 获取作者还写过其它
      this.getAuthorProductionFun();
      // 获取大家都在看的书
      this.getEveryoneReadingFun();
    },
  },
  computed: {
    ...mapState(["bookList"]),
  },
};
</script>

<style lang="less">
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.book_details {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // 顶部
  .top {
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    transition: all 1s;
    span {
      flex: 0 0 40px;
      display: block;
      text-align: center;
      i {
        font-size: 18px;
        color: #fff;
      }
    }
    .novel_name {
      flex: 1;
      font-size: 14px;
      color: #fff;
    }
  }

  // 内容区域
  .container {
    flex: 1;
    overflow: auto;
    .content {
      // height: 2000px;
      background-color: #f8f8f8;
      // 大图介绍区域
      .bg_cover {
        width: 100%;
        height: 210px;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        position: relative;
        img.bg_cover {
          width: 100%;
          height: 150%;
          position: absolute;
          z-index: 1;
          opacity: 0.1;
        }
        // 书本介绍详情
        .book_introduct {
          margin: 40px 12px 0;
          width: calc(100% - 24px);
          height: 120px;
          display: flex;
          position: relative;
          z-index: 2;
          .left {
            background-color: rgb(0, 238, 255);
            flex: 0 0 90px;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            margin-left: 12px;
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            & > div {
              height: 100%;
            }
            .name {
              font-size: 14px;
              font-weight: 550;
              height: 28px;
              line-height: 28px;
              color: #fff;
            }
            .writer,
            .type,
            .introduce {
              font-size: 12px;
              min-height: 28px;
              line-height: 28px;
              color: #fff;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .introduce {
              word-break: break-all;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3; /* 设置行数 */
              -webkit-box-orient: vertical;
            }
          }
        }
      }
      //文字介绍区域
      .brief_introduction {
        background-color: #fff;
        margin-bottom: 6px;
        .text {
          max-height: 44px;
          overflow: hidden;
          transition: all 1s;
          padding: 10px 20px 25px 13px;
          position: relative;
          p {
            font-size: 12px;
            color: #818181;
            line-height: 18px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 设置行数 */
            -webkit-box-orient: vertical;
          }
          span {
            position: absolute;
            right: 20px;
            bottom: 6px;
            i {
              font-size: 12px;
            }
          }
        }
        // 控制高度自适应
        .autoh {
          max-height: 500px;
          p {
            -webkit-line-clamp: 100; /* 设置行数 */
          }
        }
      }
      // 目录和最近更新
      .mesh {
        height: 54px;
        background-color: #fff;
        margin-bottom: 6px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        .m_left {
          flex: 0 0 40px;
          span {
            font-weight: 600;
            font-size: 15px;
            color: #2b2b2b;
          }
        }
        .m_right {
          flex: 1;
          max-width: 280px;
          text-align: right;
          font-size: 14px;
          .updata {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            p {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .time {
              font-size: 12px;
              transform: scale(0.8333333);
              transform-origin: right;
              color: #a8a8a8;
            }
            .section {
              font-size: 14px;
              transform: scale(0.8333333);
              transform-origin: right;
              color: #707070;
            }
          }
        }
        .more {
          flex: 0 0 30px;
          text-align: right;
          span {
            i {
              font-size: 12px;
              color: #8c8c8c;
            }
          }
        }
      }
      // 评论
      .comment {
        background-color: #fff;
        padding: 0 13px;
        margin-bottom: 6px;
        // 头
        .comment_header {
          padding: 12px 4px 0;
          height: 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #f0f0f0;
          margin-bottom: 6px;
          .hots {
            font-size: 14px;
            font-weight: 550;
          }
          .icon {
            color: #a2c7e3;
            i {
              font-size: 14px;
            }
          }
        }
        // 评论内容
        .c_content {
          .item {
            padding-top: 8px;
            border-bottom: 1px solid #f0f0f0;
            // 用户信息
            .user {
              display: flex;
              height: 33px;
              .user_cover {
                height: 33px;
                flex: 0 0 33px;
                border-radius: 50%;
                border: 1px solid #ccc;
                margin-right: 6px;
                text-align: center;
                line-height: 33px;
                span {
                  i {
                    color: #a2c7e3;
                    font-size: 20px;
                  }
                }
              }
              .user_msg {
                flex: 1;
                .u_name {
                  font-size: 13px;
                  color: #464646;
                }
                .c_time {
                  font-size: 12px;
                  color: #818181;
                }
              }
              .praise {
                .icon {
                  color: #a2c7e3;
                  font-size: 12px;
                }
                .c_num {
                  font-size: 12px;
                  color: #646464;
                }
              }
            }
            // 评论内容
            .c_text {
              padding: 10px 30px;
              p {
                font-size: 12px;
                color: #a1a1a1;
              }
            }
          }
        }
        // 评论底部区域
        .c_footer {
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            font-size: 12px;
            transform-origin: center;
            transform: scale(0.8333);
            color: #9aa0cf;
            i {
              font-size: 12px;
              transform-origin: center;
              transform: scale(0.8333);
            }
          }
        }
      }
      // 作者还写过
      .similarity {
        background-color: #fff;
        padding: 0 13px;
        margin-bottom: 6px;
        // 头
        .s_header {
          padding: 12px 4px 0;
          height: 24px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f0f0f0;
          .hots {
            font-size: 14px;
            font-weight: 550;
          }
        }
        // 作者还写过的书本
        .s_item {
          // 书
          .books {
            padding: 10px 0;
            border-bottom: 1px solid #f1f1f1;
            display: flex;
            height: 96px;
            .img {
              flex: 0 0 74px;
              height: 96px;
              margin-right: 3.7333%;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .text {
              flex: 1;
              overflow: hidden;
              p {
                display: flex;
                height: 50%;
                align-items: center;
                font-size: 14px;
                color: #818181;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .writer {
                font-size: 12px;
                color: #8e8e8e;
              }
            }
          }
          // 底
          .s_footer {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              color: #3d3d3d;
              font-size: 12px;
              i {
                color: #3d3d3d;
                font-size: 12px;
              }
            }
          }
        }
      }

      // 大家还看过
      .also_seen {
        background-color: #fff;
        border-bottom: 30px solid #f8f8f8;
        .a_header {
          padding: 0 13px;
          height: 24px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f0f0f0;
          span {
            font-size: 14px;
            font-weight: 550;
          }
        }
        .a_item {
          display: flex;
          flex-wrap: wrap;
          margin: 0 auto;
          .books {
            flex: 0 0 33.33333%;
            padding: 10px 0;
            text-align: center;
            .img {
              display: inline-block;
              width: 74px;
              height: 96px;
              margin-right: 3.7333%;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .text {
              p {
                display: inline-block;
                width: 74px;
                height: 50%;
                align-items: center;
                font-size: 12px;
                color: #818181;
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
  // 底部
  .bottom {
    flex: 0 0 50px;
    display: flex;
    .b_item {
      flex: 0 0 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .font {
        margin-bottom: 4px;
      }
      span {
        font-size: 12px;
      }
      .icon-jiarushujia,
      .icon-yijiarushujia {
        color: #e9517a;
      }
    }
    .item_end {
      flex: 0 0 50%;
      background-color: #e05666;
      span {
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
</style>